import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import { todayMonth, todayDate, GENDER} from 'const';
import { WingBlank, WhiteSpace, List, InputItem, Picker, DatePicker, Button, Checkbox, Flex} from 'antd-mobile';

const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const utcOffset = new Date(now.getTime() - (now.getTimezoneOffset() * 60000));
// gender definition
const { CheckboxItem, AgreeItem } = Checkbox;
const minDate = new Date(1900, 1, 1);
const maxDate = now;

const UpdateProfilePage = ({ dispatch, form, profile, gender, ...rest }) => {

  const { getFieldProps, setFieldsValue, validateFields } = form;

  const update = () => validateFields((err, value) => {

    value.gender = gender;
    let d = value.birthday;
    d = d.getFullYear() + '-' + todayMonth[(d.getMonth() + 1)] + '-' + todayDate[d.getDate()];
    value.birthday=d;
    dispatch({
      type: 'profile/updateProfile',
      payload: value,
    });
  });

  const onChange = (value) => {
    dispatch({ type: 'profile/save', payload: { gender: value } });
  };

  let mybirthday;
  if(profile.birthday){
    let sr = profile.birthday.split(" ")[0];
    mybirthday = new Date(sr.replace(/-/g, "/"))
  }
  return (
    <WingBlank size="md">
      <WhiteSpace />
      <List>
        <InputItem
          placeholder="请输入"
          {...getFieldProps('name', {
            initialValue: profile.name,
          })}>姓名</InputItem>
        <InputItem 
          extra={GENDER.map(i => (
          <div style={{float: 'left'}} >
              <AgreeItem 
                checked = {gender === i.value} 
                onChange={() => onChange(i.value)}
              >
                {i.label}
              </AgreeItem>
          </div>
          ))}
        >性别</InputItem>
        <DatePicker
          {...getFieldProps('birthday', {
            initialValue: mybirthday,
            validate: [{
              trigger: false,
              rules: [{ required: true, message: '请选择出生年月' }],
            }],
          })}
          mode="date"
          title="请选择"
          minDate={minDate}
          maxDate={maxDate}>
          <List.Item arrow="horizontal">出生年月</List.Item>
        </DatePicker>
      </List>
      <WhiteSpace size="xl" />
      <Button type="primary" onClick={update}>保存</Button>
      <WhiteSpace size="xl" />
    </WingBlank>
  );
};

export default connect(({ profile }) => ({...profile}))(createForm()(UpdateProfilePage));
